<template>
    <div class="messagesInput" ref="messagesInput">
      <div class="messages">
        <div class="messageArea" v-for="message in message" :key="message.newsId">
          <div class="message" v-if="message.user.userId != news.uewId" >
            <el-avatar :src=message.user.userImg fit="contain"  size="large"></el-avatar>
            <div class="messageRight">
                <div class="info">
                    <div>{{ message.user.userName }}</div>
                    <div>{{ message.news.time}}</div>
                </div>
                <div class="talk">{{message.news.newsContent}}</div>
            </div>
            <div class="sjinfo">
                <el-avatar :src=message.merchat.merImg fit="contain"></el-avatar>
                <div>{{ message.merchat.merName }}</div>
            </div>
        </div>
        <div class="messageOwner" v-if="message.user.userId == news.uewId" >
            <el-avatar :src=message.user.userImg fit="contain"></el-avatar>
            <div class="messageRight">
                <div class="info">
                    <div><span class="spanInfo">{{ message.user.userName }}</span></div>
                    <div><span class="spanInfo">{{ message.news.time}}</span></div>
                </div>
                <div class="talk"><span class="spanInfo">{{message.news.newsContent}}</span></div>
            </div>
            <div class="sjinfo">
                <el-avatar :src=message.merchat.merImg size="large" fit="contain"></el-avatar>
                <div><span class="spanInfo">{{message.merchat.merName}}</span></div>
            </div>
        </div>
        </div>
    </div>
        <div class="aaa">
            <div class="diinupt">
            <div class="inputSize">
                <el-autocomplete
                    v-model="state"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="选择商家"
                    @select="handleSelect"
                ></el-autocomplete>
                <div class="inuptg">
                    <el-input
                        placeholder="请输入内容"
                        suffix-icon="el-icon-edit"
                        v-model="news.newsContent"><el-button type="primary" slot="append" icon="el-icon-search" @click="goto">发送</el-button>
                    </el-input>
                </div>
        </div>
        </div>
        </div>
    </div>
</template>

<style>
    .spanInfo{
      color: #ff0000;
    }
    .messages {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        /* overflow-y: scroll; */
        font-size: 20px;
    }
    .messages .messageArea:first-of-type {
        margin-bottom: 130px;
    }
    .messageArea{
        display: flex;
        flex-direction: column-reverse;
        /* justify-content: flex-start;
        align-items: flex-start; */
    }
    .el-avatar{
        margin-top: 10px;
        margin-left: 26px;
    }
    .message{
        width: 1200px;
        background-color: #bfbfcb;
        display: flex;
        position: relative;
        margin: 14px 0px;
        margin-left: 0px;
        border-radius: 20px;
    }
    .messageRight{
        width: 900px;
    }
    .info{
        font-size: 18px;
        display: flex;
        margin-top: 10px;
        margin-bottom: 4px;
    }
    .info :first-child{
        margin-left: 10px;
        margin-right: 10px;
    }
    .talk{
        line-height: 36px;
        display: inline-block; 
        background-color: #d0cede;
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 6px;
        margin-bottom: 20px;
    }
    .sjinfo{
        position: absolute;
        right: 40px;
        text-align: center;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .sjinfo>.el-avatar{
      margin-top: 0px;
      margin-left: 30%;
    }
    .messageOwner{
        width: 1200px;
        background-color: #a1a1f7;
        display: flex;
        position: relative;
        margin: 14px 0px;
        margin-left: 0px;
        border-radius: 20px;
        transform: scaleX(-1);
    }
    .messageOwner span {
        display: block;
        transform: scaleY(-1);
        transform: scaleX(-1);
    }
    /* .messageOwner .el-avatar{
      margin-left: 26px;
    } */
    .messageOwner .sjinfo{
      position: relative;
      left: 140px;
      top: 90px;
    }
    .aaa{
        height: 80px;
        width: 1200px;;
        background-color: rgb(255, 255, 255);
        position: absolute;
        bottom: 0px;
    }
    .diinupt{
        height: 80px;
        width: 1200px;;
        background-color: aqua;
        position: absolute;
        bottom: 40px;
        line-height: 80px;
        display: flex;
    }
    .diinupt::after {
        content: "";
        display: table;
        clear: both;
        height: 0;
    }
    /* .el-avatar{
        margin-top: 10px;
        margin-left: 10px;
    } */
    .inputSize{
        display: flex;
        margin-left: 20px;
    }
    .inuptg{
        width: 800px;
        margin-left: 10px;
    }
</style>
<script>
    import axios  from 'axios';
    import moment from 'moment';
export default {
    data(){
        return{
            restaurants: [],
            dataM:[],
            state: '',
            timeout:  null,
            news:{
              newsContent:'',
              time:'',
              uewId:4,
              mewId:17,
            },
            message: [],
            param:{
              merId: null,
              merName: null,
              // merNameLike:null,
              // merPassword: null,
              // Authority:null,
              // merImg: null,
              // m_addressId: null,
              pageNum: 1,
              pageSize: 200,
            }
        }
    },
    watch:{
      state(newValue,oldValue){
        console.log(this.state);
          if (newValue == '') {
          this.news.mewId=17;
          console.log(this.news.mewId);
        }
        }
    },
    methods: {
      loadAll() {
        axios({
            url:'http://localhost:8080/MerchatURL/selectList',
            method:'Post',
            data:this.param,
        }).then(response =>{
          console.log(response.data.data);
          this.restaurants= response.data.data;
          var data = this.restaurants;
          for(var i=0; i<this.restaurants.length;i++){
            var map={};
            map.value=data[i].merName;
            map.merId=data[i].merId;
            this.dataM[i]=map;
          }
          })
          console.log(this.dataM);
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.dataM;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        console.log(results);
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          var re = false;
          for (let i = 0; i < queryString.length; i++) {
            if (state.value.includes(queryString[i])) {
              re= true;
            }
          }
          return re;
        };
      },
      handleSelect(item) {
        console.log(this.state);
        this.news.mewId=item.merId;
        console.log(item);
      },
      goto(){
        this.news.time=moment().format('YYYY-MM-DD HH:mm:ss')
        console.log(this.news);
        axios({
            url:'http://localhost:8080/news/insert',
            data:this.news,
            method:'Post',
            }).then(response=>{
              this.$message({
                      type: 'success',
                      message: '发送成功!'
                    });
            })
          this.news.newsContent='';
          this.state='';
          this.news.mewId=17;
      },
      startTimer() {
      // 使用setInterval函数每秒执行一次函数
      this.timer = setInterval(() => {
        this.fresh();
      }, 1000);
    },
      fresh(){
            axios({
            url:'http://localhost:8080/news/selectAll',
            method:'Post',
            }).then(response=>{
                this.message=response.data
            })
        },
        scrollToBottom() {
            const messagesInput = this.$refs.messagesInput.parentNode;
            messagesInput.scrollTop=messagesInput.scrollHeight;
      },
      getData() {
        // 异步获取数据
        // 假设返回一个Promise对象
        return new Promise((resolve) => {
          // 模拟异步操作
          setTimeout(() => {
            resolve();
          }, 180);
        });
      },
    },
    mounted() {
      this.loadAll();
      this.fresh();
      this.getData().then(() => {
            this.$nextTick(() => {
              this.scrollToBottom();
          });
            });
    },
    created() {
    // 在组件创建时开始定时执行函数
    this.news.uewId=this.$route.query.userId;
    this.startTimer();
  },
    beforeDestroy() {
    // 在组件销毁前清除定时器
    clearInterval(this.timer);
  }
}
</script>
